<button type="button" class="btn-stub"></button>
<div *ngIf="initialized$ | async" [attr.class]="'wrapper layout-mode-' + (layoutMode$ | async)">
    <div *ngIf="logins$ | async; let logins" [ngClass]="{'d-none': hideControls$ | async}" class="accounts-block px-2 pt-2">
        <div class="controls">
            <div class="btn-group" container="body" dropdown>
                <button (click)="openSettingsView()" class="btn btn-sm btn-secondary" id="optionsMenuItem" title="Options" type="button">
                    <i class="fa fa-cog"></i>
                </button>
                <button class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" dropdownToggle type="button">
                    <span class="caret"></span>
                </button>
                <ul *dropdownMenu class="dropdown-menu" role="menu">
                    <li role="menuitem">
                        <a (click)="$event.preventDefault(); openSettingsFolder();" class="dropdown-item" href="{{ userDataDir }}">
                            Open Settings Folder
                        </a>
                    </li>
                    <li class="divider dropdown-divider"></li>
                    <li role="menuitem">
                        <button (click)="openAboutWindow()" class="dropdown-item" type="button">
                            About
                        </button>
                    </li>
                    <li class="divider dropdown-divider"></li>
                    <li role="menuitem">
                        <button (click)="logout()" class="dropdown-item" id="logoutMenuItem" type="button">
                            <i class="fa fa-sign-out"></i>
                            Log Out
                        </button>
                    </li>
                    <li role="menuitem">
                        <button (click)="quit()" class="dropdown-item text-danger" type="button">
                            <i class="fa fa-times"></i>
                            Exit
                        </button>
                    </li>
                </ul>
            </div>
        </div>
        <div
            [ngStyle]="!logins.length ? {'visibility': 'hidden'} : {}" class="btn-group accounts-list d-lg-none" dropdown
            placement="bottom right"
        >
            <div *ngIf="unreadSummary && logins.length > 1" class="unread-summary">
                <electron-mail-unread-badge
                    *ngIf="unreadSummary && logins.length > 1"
                    [alwaysRenderTheValue]="true"
                    [value]="unreadSummary"
                ></electron-mail-unread-badge>
            </div>
            <electron-mail-account-title
                (click)="cancelEvent($event)"
                *ngIf="selectedAccount"
                [account]="selectedAccount"
                [highlighting]="false"
                dropdownToggle
            ></electron-mail-account-title>
            <ul *dropdownMenu class="dropdown-menu dropdown-menu-right" role="menu">
                <li *ngFor="let login of logins" role="menuitem">
                    <electron-mail-account-title
                        (click)="activateAccountByLogin($event, login)"
                        [account]="getAccountByLogin(login)"
                    ></electron-mail-account-title>
                </li>
            </ul>
        </div>
        <ul class="list-group accounts-list d-none d-lg-flex">
            <electron-mail-account-title
                (click)="activateAccountByLogin($event, login)"
                *ngFor="let login of logins"
                [account]="getAccountByLogin(login)"
            ></electron-mail-account-title>
        </ul>
    </div>
    <div *ngIf="loginsWithoutOrdering$ | async; let logins" class="account-block">
        <div *ngIf="logins.length; then accountsDefined else accountsUndefined"></div>
        <ng-template #accountsDefined>
            <electron-mail-account
                *ngFor="let login of logins; let index = index"
                [account]="getAccountByLogin(login)"
                [ngClass]="{'d-none': login != selectedAccount?.accountConfig?.login}"
            ></electron-mail-account>
        </ng-template>
        <ng-template #accountsUndefined>
            <div class="d-flex justify-content-center align-items-center p-3 no-accounts-block">
                <button (click)="openAddingAccountView()" class="btn btn-primary btn-lg" type="button">
                    <i class="fa fa-plus"></i>
                    Add Account
                </button>
            </div>
        </ng-template>
    </div>
</div>
